import '../assets/css/footer.css'
import { useNavigate } from 'react-router-dom'
import store from '../redux/store'
function Footer() {
    let navigate = useNavigate()
    let title = store.getState().IdentityMode.title
    const changeNav = (n, url) => {
        localStorage.setItem('index',n)
        if (url == '../center') {
            navigate(url, { state: { title } })
        } else {
            navigate(url)
        }
    }
    return (
        <div>
            <div className="box">
                <ul>
                    <li className={localStorage.getItem('index') === 0 ? 'green' : ''} onClick={() => { changeNav(0, '../center') }} >
                        <img src={require('../assets/images/home.png')} alt="" />
                        <p>首页</p>
                    </li>
                    <li className={localStorage.getItem('index') === 1 ? 'green' : ''} onClick={() => { changeNav(1, '../Message') }}>
                        <img src={require('../assets/images/message.png')} alt="" />
                        <p>消息</p>
                    </li>
                    <li className={localStorage.getItem('index') === 2 ? 'green' : ''} onClick={() => { changeNav(2, '../Person') }}>
                        <img src={require('../assets/images/person.png')} alt="" />
                        <p>我的</p>
                    </li>
                </ul>
            </div>
        </div>
    )
}

export default Footer